<template>
  <div class="bannerImg">
    <!-- 左侧轮播显示区域 -->
    <div v-for="(item,index) in list[leftIndex].images" :key="index">
      <div v-if="!list[leftIndex].images[index].url" class="image-mask">广告图片</div>
      <!--有图片-->
      <div v-else class="haveImg">
        <img :src="item.url" :class="item.selfAdaption==='yes' ? 'fitWidth' : 'notFit'">
      </div>
    </div>
    <div v-if="list[leftIndex].images===0" class="image-mask">广告图片</div>
    <!-- 右侧轮播编辑区域 -->
    <div v-if="list.length && list[leftIndex].showRight">
      <div class="editRightBanner">
        <!-- 头部提示区域 -->
        <header class="title">
          图片广告设置
          <div class="help-text">建议图片尺寸为750x400px，支持 jpg/png/gif 格式，大小不超过2MB</div>
        </header>
        <div class="editCon">
          <div
            v-for="(item,index) in list[leftIndex].images"
            :key="index"
            class="add_image"
          >
            <div>
              <span style="width:80px;text-align:right;display: inline-block;">广告图片：</span>
              <div class="image">
                <!--无图片-->
                <div v-if="!list[leftIndex].images[index].url">
                  <div v-if="list[leftIndex].images[index]">+添加图片</div>
                </div>
                <!--有图片-->
                <div v-else class="show_Image">
                  <img :src="item.url" alt>
                </div>
                <el-upload
                  :file-list="fileList"
                  :on-change="handleLogoChange"
                  :http-request="uploadLogoFile"
                  class="upload-demo"
                  action=""
                >
                  <el-button size="small" type="primary" class="uploadBtn">点击上传</el-button>
                </el-upload>
              </div>
            </div>

            <div>
              <div style="margin-top:20px;">
                <span style="width:80px;text-align:right;display: inline-block;">链接：</span>
                <el-input
                  v-model="item.link"
                  size="mini"
                  placeholder="例如 https://www.baidu.com"
                  style="width:240px;"
                />
              </div>
              <!--<div style="margin-top:20px;">-->
                <!--<span>自适应手机屏幕：</span>-->
                <!--<el-radio-group v-model="item.selfAdaption">-->
                  <!--<el-radio label="yes">开启</el-radio>-->
                  <!--<el-radio label="no">关闭</el-radio>-->
                <!--</el-radio-group>-->
              <!--</div>-->
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播链接选择课程弹框 -->
  </div>
</template>
<script>
  import {upLoadFile} from '@/api/upLoadFile'; // 数据接口

  export default {
    props: ['list', 'leftIndex'],
    data() {
      return {
        fileList: [],
        keyWord: '',
        courseDialogVisible: false,
        classDialogVisible: false,
        linkTableData: [],
        logofile: '',
      }
    },

    mounted() {
      this.restaurants = this.loadAll()
    },
    methods: {
      handleLogoChange(file) {
        this.logofile = file.raw
      },
      uploadLogoFile() {
        const fileForm = new FormData()
        fileForm.append('name', this.logofile.name)
        fileForm.append('uid', this.logofile.uid)
        fileForm.append('file', this.logofile)
        upLoadFile(fileForm).then(response => {
          this.list[this.leftIndex].images[0].url = response.data.url
          // this.list[this.leftIndex].images[this.rightIndex].url = response.data.url
        })
      },
      // 图片上传
      beforeAvatarUpload(file) {
        const isImg = file.type === 'image/jpeg' || 'image/png' || 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 2

        if (!isImg) {
          this.$message.error('上传头像图片只能是 JPG/PNG/GIG 格式!')
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!')
        }
        return isImg && isLt2M
      },
      handleChange(file, fileList) {
        this.fileList = fileList.slice(-1)
      },
      uploadSuccess(res, file, fileList) {
        this.list[this.leftIndex].images[0].url = URL.createObjectURL(file.raw)
      },
      // 添加链接
      handleCommand(command) {
        if (command === 'course') {
          this.courseDialogVisible = true
        }
        if (command === 'class') {
          this.classDialogVisible = true
        }
        if (command === 'member') {
          this.list[this.leftIndex].images[0].link = '会员专区'
        }
      },
      loadAll() {
        return [
          {'value': 'class NO.1', 'price': '2', 'number': '2', 'createTime': '2'}
        ]
      },
      querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
        clearTimeout(this.timeout)
        this.timeout = setTimeout(() => {
          cb(results)
        }, 1000 * Math.random())
      },
      createStateFilter(queryString) {
        return (state) => {
          return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      },
      handleSelect(item) {
        if (this.linkTableData.length > 0) {
          this.$message({
            message: '只能添加一个链接',
            type: 'warning'
          })
          return
        }
        this.linkTableData.push({
          name: item.value,
          price: item.price,
          number: item.number,
          createTime: item.createTime
        })
      },
      // 链接标签删除
      handleTagClose() {
        this.list[this.leftIndex].images[0].link = ''
      },
      // 移除链接列表
      removeLink(index) {
        this.linkTableData.splice(index, 1)
      },
      // 选择课程确认
      courseConfirm() {
        if (this.linkTableData.length === 0) {
          this.courseDialogVisible = false
          return
        }
        this.list[this.leftIndex].images[0].link = this.linkTableData[0].name
        this.courseDialogVisible = false
        this.linkTableData = []
        this.keyWord = ''
      },
      // 选择班级确认
      classConfirm() {
        if (this.linkTableData.length === 0) {
          this.classDialogVisible = false
          return
        }
        this.list[this.leftIndex].images[0].link = this.linkTableData[0].name
        this.classDialogVisible = false
        this.linkTableData = []
        this.keyWord = ''
      }
    }
  }
</script>
<style lang="scss" scoped>
  .bannerImg {
    .image-mask {
      width: 100%;
      height: 100%;
      background-color: #e1e1e1;
      font-size: 26px;
      color: #919191;
      font-weight: 700;
      text-align: center;
      line-height: 194px;
    }

    .haveImg {
      position: relative;
      width: 100%;
      text-align: center;
      overflow: hidden;

      .notFit {
        height: 100%;
      }

      .fitWidth {
        height: 100%;
        width: 100%;
      }
    }
  }

  .editRightBanner {
    width: 400px;
    position: absolute;
    left: 105%;
    top: 0;
    padding: 10px;
    border: 1px solid #e1e1e1;
    background-color: #fafafa;

    .title {
      font-size: 14px;
      padding-bottom: 15px;
      margin-bottom: 15px;
      border-bottom: 1px solid #e1e1e1;

      .help-text {
        font-size: 12px;
        color: #616161;
        margin-top: 5px;
      }
    }

    .editCon {
      background-color: #fff;
      padding: 10px 0;
      border: 1px solid #e1e1e1;
    }

    .add_image:after {
      display: block;
      clear: both;
      content: '';
      visibility: hidden;
      height: 0;
    }

    .add_image {
      position: relative;
      padding: 10px;

      .image {
        position: relative;
        width: 230px;
        height: 119px;
        margin-left: 80px;
        margin-top: -20px;
        margin-bottom: 10px;
        line-height: 119px;
        text-align: center;
        background-color: #f5f5f5;

        .uploadBtn {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
        }

        /deep/ .el-upload-list {
          display: none;
        }
      }

      .show_Image {
        width: 230px;
        height: 119px;

        img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .add_image.border {
      border: 1px solid #408ffb;
    }
  }
</style>
